<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        姓名：<input type="text" v-model="user.name" /> {{user.name}}
        <br>
        年龄：<input type="text" v-model.number.trim.lazy="user.age"> {{user.age}}
        <br>
        爱好 :<input type="text" v-model.trim="user.hobby"/>
        <select v-model="city">
            <option>北京</option>
            <option>上海</option>
            <option>武汉</option>
        </select> {{city}}
        <hr>
        <input type="checkbox" v-model="ischeck" />  {{   ischeck   }}
        <hr>
        性别： 男：<input type="radio" value="男" v-model="gender" name="1" /> 女： <input type="radio" value="女" v-model="gender" name="1" /> {{gender}}
        <button @click="gethobby">点击</button>
    </div>
    <script>
        // v-model : 作用于表单 
        // 1.使用 2.实现 
        // v-model的修饰符  1.lazy:把input事件改成change 2.number 3.trim可以自动去掉首尾的空格
        // 修饰符 可以连用
       let vm =  new Vue({
            el:"#app",
            data:{
                city:"武汉",
                ischeck:true,
                gender:"男",
                user:{
                    name:"默认名称",
                    age:20,
                    hobby:"喜欢篮球"
                },
                message:"数据"
            },
            methods:{
                getage(){
                    // console.log(typeof this.user.age);
                    console.log( this.user.age)
                },
                gethobby(){
                    console.log("("+this.user.hobby+")");
                }
            }
        })
        console.log(vm._data);
    </script>
</body>
</html>